<template>
    <div class="keep-alive">
        <el-tag v-for="item in visitedRoutes" :key="item.name" :closable="item.name != 'dashboard'" type="success"
            :disable-transitions="false" @close="handleClose(item.name)" size="small" @click="goToRoute(item.path)">
            <span class="hoverme-drop" v-if="item.name === myRoute"></span>
            {{ item.title }}</el-tag>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'KeepAlive',
    computed: {
        ...mapGetters([
            'visitedRoutes'
        ]),
        myRoute() {
            return this.$route.name
        }
    },
    methods: {
        // 点击移除标签
        handleClose(name) {
            let result = this.visitedRoutes.find(val => val.name == name)
            // console.log(result);
            // console.log(this.$router.currentRoute.name);
            this.visitedRoutes.splice(this.visitedRoutes.indexOf(result), 1)
            // 如果关闭的页面是当前页面的话
            if (this.$router.currentRoute.name === name) {
                // 跳转首页
                this.$router.push({ path: '/' })
            }
        },
        // 点击跳转
        goToRoute(path) {
            this.$router.push({ path })
        },
    },
    created() {
        console.log(this.myRoute);
    }
}
</script>

<style lang="scss" scoped>
.keep-alive {
    height: 30px;
    padding: 4px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}


.keep-alive>span {
    margin: 3px;
    margin-top: 0;
    margin-bottom: 0;
}

.keep-alive>span:hover {
    background-color: #e1f7d9;
}


.keep-alive .hoverme-drop {
    display: inline-block;
    vertical-align: middle;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #67c23a;
}
</style>